<template>
  <scroller lock-x :height="height" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200" >
    <div class="box2">
      <slot></slot>
      <load-more  v-if="isShowTip"></load-more>
    </div>
  </scroller>
</template>

<script>
  import { Scroller, LoadMore } from 'vux'
  export default {
    name: "Upload",
    components:{
      Scroller, LoadMore
    },
    props:['navIndex','height'],
    data(){
      return {
        isCanPull:true,
        onFetching: false,
        flag:true,
        isShowTip:false
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.$refs.scrollerBottom.reset()
      });
    },
    methods:{
      //获取数据列表
      getData(){
        let that = this;
        if (!this.onFetching) {
          this.onFetching = true;
          setTimeout(() => {
            that.bottomCount += 20;
            //数据请求完毕之后
            that.$nextTick(() => {
              that.$refs.scrollerBottom.reset()
            });
            that.onFetching = false
          },2000)
        }
      },
      //上拉加载
      onScrollBottom () {
        let that = this;
        if (!this.onFetching) {
          that.onFetching = true;
          this.isShowTip = true;
          setTimeout(() => {
              that.bottomCount += 10;
              that.$emit('load-more',function () {
                that.$nextTick(() => {
                  that.$refs.scrollerBottom.reset()
                });
                that.onFetching = false;
                that.isShowTip = false;
              })
          //数据请求完毕之后
          }, 2000)
        }
      },
    },
    watch:{
      navIndex(){
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset({top:0})
        });
      }
    }
  }
</script>

<style scoped lang="less">
  p{
    padding: 20px 0;
  }
  .box2-wrap {
    height: 300px;
    overflow: hidden;
  }
</style>
